


<template>
    <div class="white-module module addenroll">
      <div class="title"><span></span>赛事信息</div>

      <div class="info">
        <div class="item"><span>参与代表对队</span>{{iteaminfo.team_name}}</div>
        <div class="item"><span>领队</span>{{iteaminfo.real_name}}</div>
        <div class="item"><span>比赛时间</span>{{matchinfo.matchdate}}</div>

        <div class="item"><span>报名时间</span>{{matchinfo.signdate}}</div>
        <div class="item"><span>赛事名称</span>{{matchinfo.match_name}}</div>
        <div class="item"><span>赛项名称</span>{{matchiteminfo.item_name}}</div>
        <div class="item"><span>赛项类别</span>{{matchiteminfo.classname}}</div>
        <div class="item"><span>赛项类型</span>{{matchiteminfo.typename}}</div>

        <div class="item">
          <span><span>*</span>参赛组别</span>
          <!--
          <el-radio-group v-model="groupId">
            <el-radio :label="100301">小学组</el-radio>
            <el-radio :label="100302">初中组</el-radio>
            <el-radio :label="100303" v-if="matchiteminfo.item_name!='“蜂鸟行动”赛'">高中组</el-radio>
          </el-radio-group>
          -->
          <el-radio-group v-model="groupId">
            <el-radio v-for="item in dictGroups" :label="item.id">{{item.dictLabel}}</el-radio>
          </el-radio-group>
        </div>

      </div>
      <div class="title"><span></span>参赛选手</div>
      <div class="group">
            <div class="item" v-for="(item,index) in groups" :key="index">
               <span><span>*</span>选手{{index+1}}</span>
              <el-select placeholder="选择选手" v-model="item.userId" @change="selectUser" style="width: 180px;">
                <el-option
                    v-for="itemO in studentList"
                    v-show="itemO.selected!==1 || item.userId===itemO.id "
                    :key="itemO.id"
                    :label="itemO.real_name"
                    :value="itemO.id">
                </el-option>
              </el-select>
              <span><span>*</span> 指导导师</span>
              <el-cascader style="width:180px"  v-model="item.teachers" :options="teacherList" :props="{ multiple: false }" collapse-tags collapse-tags-tooltip :show-all-levels="false" />
              <!--国赛且开通了直通-->
              <block v-if="matchinfo.match_level== 1 && userInfo.team.isPass=='1'">
                <span style="margin-left: 20px;"><span>*</span> 直通码</span>
                <el-input v-model="item.code" placeholder="请输入直通码" style="width: 180px;"></el-input>
              </block>
              <span v-if="index!=0"><el-button @click="deleteNum(index)">删除</el-button></span>
              <span v-if="index==groups.length-1"><el-button @click="addNum">添加</el-button></span>
            </div>

      </div>
      <div class="hint">
        注：赛前请关注 参赛报名 > 报名记录 > 对应赛事赛项的参赛时间信息；
        <div class="agreement"> <el-checkbox v-model="dataForm.checked2"/><span>*</span>点击同意并接受即表示您已阅读了解并同意<el-button type="text" @click="xieyiShow = true">《报名协议》</el-button></div>
      </div>

      <div class="btns">
           <el-button type="primary" @click="submit" :loading="btnDisabled" :disabled="btnDisabled" v-if="iteaminfo.status==1">提交报名</el-button>
           <el-button  @click="back">取消</el-button>
      </div>
    </div>

  <el-dialog title="报名协议" v-model="xieyiShow" width="700px">
    <div style="text-align: left; line-height: 35px;" class="student">
      一、参赛代表队：
      <br/>1.本代表队承诺本队及其所属人员自愿报名参加全国青少年无人机大赛。
      <br/>2.本代表队承诺填报的报名信息均真实有效。
      <br/>3.本代表队承诺在正式提交与参赛前，已检查核实所有填报信息和上传文件，确认符合申报要求和赛事及赛项规定，如因填写错误造成的后果由本队及本队相关人员自行承担。

      <br/>二、大赛组委会
      <br/>大赛组委会声明对收集的“全国青少年无人机大赛”的报名信息仅限于本大赛组织管理使用。
    </div>
    <div style="text-align: center" slot="footer" class="dialog-footer">
      <el-button @click="xieyiShow = false">我知道了</el-button>
    </div>
  </el-dialog>

  </template>



<script lang="ts" >
import {defineComponent, onMounted, reactive, ref, toRefs} from "vue";
import baseService from "@/utils/baseService";
import listService from "@/utils/listService";
import router from "@/router";
import {getCache, setCache} from "@/utils/cache";

import {IHttpResponse} from "@/utils/interface";
import {ElMessage} from "element-plus";


export default defineComponent({
  setup() {
    const state = reactive({
      getDataListURL: "/front/fast/match/match/page?pageSize=10&name=小鸟飞飞",
      getDataListIsPage: true,
      deleteURL: "/pay/order",
      deleteIsBatch: true,
      dataForm: {
        orderId: "",
        status: "",
        name: "",
        checked2: false
      }
    });
    return { ...listService(state), ...toRefs(state) };
  },

  mounted(){
    this.userInfo = getCache('userInfo', { isSessionStorage: true }, {})
    console.log('-------------------')
    console.log(this.userInfo)
    console.log(this.userInfo.team.isPass)
    this.queryTeacher();
    this.matchId = this.$route.query.matchId;
    this.matchItemId=this.$route.query.id ;
    const teamId =getCache("CacheToken",{ isSessionStorage: true }, {})["teamId"];
    this.queryTeamInfo(teamId);
    this.queryMatch(this.matchId);
    this.queryMatchItem(this.matchItemId);
  },

  data() {
    return {
      iteaminfo:{
        real_name: "王虎成",
        team_name: "传奇队"
      },
      matchiteminfo:{
        classname: "创意类",
        item_name: "个人挑战赛",
        typename: "个人赛",
        base_match_item_id: ""
      },
      matchinfo:{
        begindate: "2023-04-23 14:49:01",
        signdate: "04月24日~04月30日",
        match_name: "青岛李沧初赛1",
        matchdate: "",
        match_level: null as any,
        stop_signup: null as any
      },
      matchItemId: null as any,
      matchId:null as any,
      teamName:'',
      groupId:0,
      groups:[{name:"1",t:[]}],
      checkList:['selected and disabled', 'Option A'],
      studentList:[],
      selectStudent:[] as any,
      teacherList:[ {
        value: 'guide',
        label: 'Guide'}
      ],
      options: [],
      btnDisabled: false,
      xieyiShow: false,
      dictGroups: [],
      userInfo: {
        team: {
          isPass: '0'
        }
      },
    };
  },

  methods: {
    //选中选手时，要过滤掉，不让其它选手选
    selectUser(){
      this.studentList.forEach((e:any)=>{
        e.selected=2;
        this.groups.forEach((e2:any)=>{
          if(e2.userId ==e.id ){
            e.selected=1;
          }
        })
      });
    },
    queryUser(season:string, matchId:string){
      baseService.get("/front/fast/user/userList/list?pageSize=10&type=4&season="+season+"&noItemId="+this.matchItemId+"&matchId=" + matchId).then(e=>{
       this.studentList =  e.data;

      });
    },
    queryTeacher: function () {
      baseService.get("/front/fast/user/userList/list?pageSize=10&type=3").then(e => {
        this.teacherList = [];
        interface SpUser{id:string,real_name:string};
        e.data.forEach((e2:SpUser) => {
           this.teacherList.push( {
             value: e2.id,
             label: e2.real_name});
        });


      });
    },
    /**
     * 个人赛提交报名
     * */
    submit() {
      this.btnDisabled = true;
      const users: any = [];
      let check = true;
      if(this.matchinfo.stop_signup == '1'){
        ElMessage.error("报名时间已截止！");
        check = false;
      }

      if (!this.groupId) {
        ElMessage.error("请选择参赛组别！");
        check = false;
      }
      this.groups.forEach((e: any) => {
        if (!e.userId && check) {
          ElMessage.error("请选择选手");
          check = false;
        }
        if (!e.teachers && check) {
          ElMessage.error("请选择指导老师");
          check = false;
        }
        users.push({userId: e.userId, teachers: e.teachers ? e.teachers.join(","): '', code: e.code});
      })

      if (!this.dataForm.checked2) {
        ElMessage.error("您未同意用户协议，请先同意！");
        check = false;
      }


      if (!check) {
        this.btnDisabled = false;
        return;
      }
      let isPass = (this.matchinfo.match_level== 1 && this.userInfo.team.isPass=='1') ?  '1' : '0';
      const dataForm = {groupId: this.groupId, teamName: this.teamName, users, matchItemId: this.matchItemId, isPass: isPass};
      baseService.post("/front/spmatchItemTeam/savePerson", dataForm).then((res: any) => {
        if (res.code == 0) {
          ElMessage.success('报名成功');
          this.back();
        } else {
          ElMessage.error(res.msg);
        }
      }).finally(() => {
        //执行完毕
        this.btnDisabled = false;
      });
    },

    back(){
      router.push("/enroll/matchEnroll?id="+this.matchId);
    },
    addNum(){
      //console.log(this.groups.length)
      //个人类最多添加20个选手
      if(this.groups.length>=20){
        ElMessage.error("当前已到单次最大添加报名数量");
        return;
      }
      this.groups.push({name:"1",t:[]});
    },
    deleteNum(index:number){
      this.groups = this.groups.filter((e,i)=>i!=index)  ;
      this.selectUser();
    },
    //查询赛项信息
    queryMatchItem(id:string){
      baseService.get("/front/fast/match/matchItem/info?id="+id).then((e:any)=>{
        if(e.code=='0'){
          this.matchiteminfo = e.data;
          if(this.matchiteminfo){
            this.queryGroup(this.matchiteminfo.base_match_item_id);
          }
        }
      });
    },
    //查询赛项信息
    queryTeamInfo(id:string){
      baseService.get("/front/fast/user/team/info?id="+id).then((e:any)=>{
        if(e.code=='0'){
          this.iteaminfo = e.data;
        }
      });
    },
    //查询赛项信息
    queryMatch(id:string) {
      baseService.get("/front/fast/match/match/info?id=" + id).then((e: any) => {
        if (e.code == '0') {
          this.matchinfo = e.data;
          this.queryUser(e.data.season, id);
        }
      });
    },
    //查询参赛组别
    queryGroup(id:string){
      baseService.get("/front/spbasematchitemgoupref/queryGroup?id="+id).then((e:any)=>{
        if(e.code=='0'){
          this.dictGroups = e.data;
        }
      });
    }

  }
});
</script>

<style lang="scss" scoped>
.module {
    padding: 20px 0px;
    margin-bottom: 12px;
    position: relative;

    .title {
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: $font-weight-bold;
        padding: 0px 24px;

        span {
            width: 4px;
            height: 12px;
            background: #00a0e9;
            margin-right: 7px;
        }
    }

    .info {
        margin-bottom: 40px;

        .item {
            display: flex;
            align-items: center;
            margin-top: 14px;
            font-family: PingFangSC-Regular, PingFang SC;

            >span {
                width: 136px;
                text-align: right;

                font-weight: $font-weight-bold;
                margin-right: 20px;
                font-family: PingFangSC-Medium, PingFang SC;

                span {
                    color: #D9161C;
                }
            }

            .el-input {
                width: 220px;
            }
            .el-select{
                width: 220px;
            }
        }
    }

    .group {
        margin-left: 73px;
        margin-top: 16px;

        .item {
            display: flex;
            align-items: center;
            margin-bottom: 16px;
            height: 33px;

            >span {
                margin-right: 16px;

                span {
                    color: #D9161C;
                }
            }

            .el-select {
                width: 241px;
                margin-right: 44px;
            }


        }
    }

    .hint {
        text-align: center;
        margin: 50px 0px 20px;

        color: #959CA9;
        font-size: 12px;
    }

    .btns {
        display: flex;
        justify-content: center;
        padding-bottom: 5px;
        .el-button{
            width: 108px;
            height: 38px;
        }
    }
}</style>

<style lang="scss">
.addenroll{
  .group{
          .el-cascader__tags .el-tag{
              background: #fff;
          }



  }
  .info{
  .el-radio__inner{
          border-color:#a8abb2;
      }
}
.el-checkbox__inner{

    border-color:#a8abb2;
}
}
</style>
